<template>
    <div class="sortList">
      <label >冒泡排序动画演示</label>
        <transition-group name="flip-list" tag="p" class="container">
          <div
            class="item"
            :class="{sortingHighlight: sorts.includes(item.index),sorted: sorted.includes(item.index)}"
            v-for="item in list"
            :key="item.index"
            :style="{height:(item.value)/max1*100+'%'}"
          >
            <span class="value">{{item.value}}</span>
          </div>
        </transition-group>
        <el-button type="primary" @click="bubbleSort" style="margin-top: 20px;">开始演示</el-button>
      </div>
  </template>
  
  <style scoped>
  .sortList {
    height: 480px;
  }
  .flip-list-move {
    transition: transform 0.5s;
  }
  .container {
    display: flex;
    height: 400px;
    margin-top:10px;
    align-items:flex-end;
  }
  .item {
    position: relative;
    width: 70px;
    margin-right: 20px;
    background: tomato;
    text-align: center;
    .value {
      position: absolute;
      top: -9px;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  }
  .sortingHighlight {
    position: relative;
    width: 70px;
    margin-right: 20px;
    background: aqua;
    text-align: center;
    .value {
      position: absolute;
      top: -9px;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  }
  .sorted {
    position: relative;
    width: 70px;
    margin-right: 20px;
    background: darkcyan;
    text-align: center;
    .value {
      position: absolute;
      top: -9px;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  }
  </style>

  <script setup>
  import { computed,ref} from "vue";
  const arr = ref([10, 43, 23, 65, 343, 75, 100, 34, 45, 3, 56, 22])
    const list = ref(arr.value.map((item, index) => {
        return {
          index,
          value: item
        }
      }))
    let max1 = ref(0)
    const aaa=()=>{
        arr.value.forEach(item => {
                if (item > max1.value) {
                    max1.value = item
                }
            })
    }
    aaa();
    // 高亮
    const sorts=ref([])
    const sorted=ref([])
    const bubbleSort=()=>{
        let len = list.value.length
      let i = 0
      let j = 0
      // 内层循环
      let innerLoop = () => {
        // 每个内层循环都执行完毕后再执行下一个外层循环
        if (j >= (len - 1 - i)) {
          sorts.value=[]
          sorted.value.push(list.value[j].index)
          j = 0
          i++
          outLoop()
          return false
        }
        sorts.value = [list.value[j].index, list.value[j + 1].index]
        if (list.value[j].value >list.value[j + 1].value) {
          let tmp = list.value[j]
          list.value[j]=list.value[j+1]
          list.value[j+1]=tmp
        }
        // 动画是500毫秒，所以每隔800毫秒执行下一个内层循环
        setTimeout(() => {
          j++
          innerLoop()
        }, 800)
      }
      // 外层循环
      let outLoop = () => {
        if (i >= len) {
          return false
        }
        innerLoop()
      }
      outLoop()
    }
   
</script>